<template>
<div class="container">
  <form class="input-box">
    <div class="item">学&nbsp;&nbsp;&nbsp;&nbsp;号：<input type="text" class="input" v-model="id" /></div>
    <div class="item">姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" class="input" v-model="name" autocomplete /></div>
    <div class="item">楼&nbsp;&nbsp;&nbsp;&nbsp;号：<input type="text" class="input" v-model="apartmentNum" autocomplete /></div>
    <div class="item">寝室号：<input type="text" class="input" v-model="dormitoryNum" autocomplete /></div>
    <div class="item">床&nbsp;&nbsp;&nbsp;&nbsp;号：<input type="text" class="input" v-model="bedNum" autocomplete /></div>
    <div class="item">电&nbsp;&nbsp;&nbsp;&nbsp;话：<input type="text" class="input" v-model="tel" autocomplete /></div>
    <div class="item">地&nbsp;&nbsp;&nbsp;&nbsp;址：<input type="text" class="input" v-model="address" autocomplete /></div>
    <div class="item"><input type="file" ref="input" /></div>
    <button class="btn" @click="getImg">上传信息</button>
  </form>
</div>
</template>

<script>
import {
  register
} from '@/assets/api/moudules/face'
export default {
  name: 'Referring',
  data() {
    return {
      id: '',
      name: '',
      apartmentNum: '',
      dormitoryNum: '',
      bedNum: '',
      tel: '',
      address: ''
    }
  },
  methods: {
    getImg() {
      const param = new FormData()
      param.append('file', this.$refs.input.files[0])
      param.append('id', this.id)
      param.append('name', this.name)
      param.append('apartmentNum', this.apartmentNum)
      param.append('dormitoryNum', this.dormitoryNum)
      param.append('bedNum', this.bedNum)
      param.append('tel', this.tel)
      param.append('address', this.address)
      register(param).then(res => {
        console.log(res)
        if (res.code === 200) {
          alert('添加成功')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  text-align: center;
  font-size: $font-size-medium;

  .input-box {

    .item {
      margin-top: 20px;

      .input {
        height: 30px;
        padding: 0 10px;
        background-color: #fff;
        border-radius: 5px;
        outline: none;
      }
    }

    .btn {
      width: 280px;
      height: 40px;
      margin: 40px 0;
      border-radius: 5px;
      font-size: $font-size-medium;
    }
  }
}
</style>
